<template>
    <div class="page1">
        <div class="project" v-if="!detailShow">
            <el-input v-model="storageData.num1" placeholder="num1"></el-input>
            <el-input v-model="storageData.num2" placeholder="num2"></el-input>
            <el-input v-model="storageData.num3" placeholder="num3"></el-input>

            <div>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="id" label="id" width="60">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                    <el-table-column>
                        <template slot-scope="{ row }">
                            <el-button
                                type="primary"
                                size="mini"
                                @click="toGo(row)"
                            >
                                {{ row.name }}{{ row.id }}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="detail" v-else>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
// import savePageData from '@/mixins/savePageData';
export default {
    // mixins: [savePageData],
    data() {
        return {
            storageData: {
                num1: 1,
                num2: 2,
                num3: 3,
            },
            tableData: [
                {
                    id: Math.floor(Math.random() * 10000),
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                },
                {
                    id: Math.floor(Math.random() * 10000),
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄',
                },
                {
                    id: Math.floor(Math.random() * 10000),
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄',
                },
                {
                    id: Math.floor(Math.random() * 10000),
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄',
                },
            ],
            detailShow: false,
        };
    },
    created() {
        // const storageDataStr = storage.getItem(window.location.pathname);
        // this.storageData = JSON.parse(storageDataStr);
    },
    methods: {
        savePage() {
            console.log(window.location.pathname);
        },
        toGo(item) {
            console.log(item);
            this.$router.push({
                name: 'detail',
                query: {
                    ...item,
                },
            });
        },
    },
    watch: {
        // storageData: {
        //     handler: function (newVal) {
        //         console.log(window.location.pathname, JSON.stringify(newVal))
        //         storage.setItem(window.location.pathname, JSON.stringify(newVal))
        //     },
        //     deep: true
        // }
        $route: {
            handler: function(newVal) {
                console.log(newVal);
                const { path } = newVal;
                this.detailShow =
                    path.split('/')[2] === 'detail' ? true : false;
            },
            immediate: true,
        },
    },
};
</script>

<style></style>
